<template>
  <div class="appoint-wrap">
    <div class="appoint-headline">
      <div class="coach" :class="class1" @click="chooseCoach">教练员</div>
      <div class="court" :class="class2" @click="chooseCourt">训练场</div>
    </div>

    <div class="items-select" v-show="coachs || coachpart">
      <div class="divv">
        <div class="div1" :class="classA" id="area" @click="droparea">{{ area }}<span class="down-icon"></span></div>
        <div class="div1" :class="classB" id="subject" @click="dropsub">{{ subject }}<span class="down-icon"></span></div>
        <div class="div1 border-none" :class="classC" id="car" @click="dropcar">{{ cartype }}<span class="down-icon"></span>
        </div>
      </div>
    </div>
    <div class="items-select" v-show="coachOfCourt">
      <div class="divv">
        <div class="div1" :class="classE" id="court" @click="dropcourt">{{ court }}<span class="down-icon"></span></div>
        <div class="div1" :class="classB" id="subject" @click="dropsub">{{ subject }}<span class="down-icon"></span></div>
        <div class="div1 border-none" :class="classC" id="car" @click="dropcar">{{ cartype }}<span class="down-icon"></span>
        </div>
      </div>
    </div>
    <div class="items-select" v-show="courts">
      <div class="divv">
        <div class="div2" :class="classF" id="carea" @click="dropcarea">{{ carea }}<span class="down-icon"></span></div>
        <div class="div2 border-none" :class="classD" id="type" @click="droptype">{{ type }}
          <span class="down-icon"></span>
        </div>
      </div>
    </div>
    <div class="clear"></div>

    <!-- 下拉框列表 -->
    <div class="items" v-show="arealist" @click="liftup">
        <ul>
          <span>
          <li>
            <input class="input-none" id="areas" type="radio" name="area" checked="true">
            <label for="areas"  @click="selectarea('全部区域')">全部区域</label>
          </li>
          </span>
          <span v-for="(item,index) in this.selectitems.area">
            <li class="border-none"  v-if="(index % 2)==0">
              <input class="input-none" :id="'area' + index" type="radio" name="area">
              <label :for="'area' + index"  @click="selectarea(item.name)">{{ item.name }}</label>
            </li>
            <li v-else >
              <input class="input-none" :id="'area' + index" type="radio" name="area">
              <label :for="'area' + index" @click="selectarea(item.name)">{{ item.name }}</label>  
            </li>
          </span>
        </ul>
    </div>
    <div class="items" v-show="sublist" @click="liftup">
      <ul>
        <span>
          <li>
            <input class="input-none" id="subs" type="radio" name="subject" checked="true">
            <label for="subs"  @click="selectsub('全部科目')">全部科目</label>
          </li>
        </span>
        <span v-for="(item,index) in this.selectitems.subjects">
          <li class="border-none"  v-if="(index % 2)==0">
            <input class="input-none" :id="'sub' + index" type="radio" name="subject">
            <label :for="'sub' + index"  @click="selectsub(item.name)">{{ item.name }}</label>
          </li>
          <li v-else>
            <input class="input-none" :id="'sub' + index" type="radio" name="subject">
            <label :for="'sub' + index"  @click="selectsub(item.name)">{{ item.name }}</label>
          </li>
        </span>
      </ul>
    </div>
    <div class="items" v-show="carlist" @click="liftup">
      <ul>
        <span>
          <li>
            <input class="input-none" id="cars" type="radio" name="car" checked="true">
            <label for="cars"  @click="selectcar('全部车型')">全部车型</label>
          </li>
        </span>
        <span v-for="(item,index) in this.selectitems.car">
        <li class="border-none"  v-if="(index % 2)==0">
          <input class="input-none" :id="item.name" type="radio" name="car">
          <label :for="item.name"  @click="selectcar(item.name)">{{ item.name }}</label>
        </li>
        <li v-else>
          <input class="input-none" :id="item.name" type="radio" name="car">
          <label :for="item.name"  @click="selectcar(item.name)">{{ item.name }}</label>
        </li>
        </span>
      </ul>
    </div>
    <div class="items" v-show="typelist" @click="liftup">
      <ul>
        <span>
        <li>
          <input class="input-none" id="type0" type="radio" name="type" checked="true" >
          <label for="type0" @click="selecttype('全部训练场')">全部训练场</label>
        </li>
        <li class="border-none">
          <input class="input-none" id="type1" type="radio" name="type">
          <label for="type1" @click="selecttype('离我最近')">离我最近</label>
        </li>
        <li>
          <input class="input-none" id="type2" type="radio" name="type">
          <label for="type2" @click="selecttype('评价最高')">评价最高</label>
        </li>
        <li class="border-none">
          <input class="input-none" id="type3" type="radio" name="type" >
          <label for="type3" @click="selecttype('教练最多')">教练最多</label>
        </li>
        </span>
      </ul>
    </div>
    <div class="items" v-show="courtlist" @click="liftup">
      <ul>
        <span v-for="(item,index) in this.courtdatas">
        <li class="border-none"  v-if="(index % 2)==1">
          <input class="input-none" :id="item.name" type="radio" name="court">
          <label :for="item.name"  @click="selectcourt(item.name)">{{ item.name }}</label>
        </li>
        <li v-else>
          <input class="input-none" :id="item.name" type="radio" name="court">
          <label :for="item.name"  @click="selectcourt(item.name)">{{ item.name }}</label>
        </li>
        </span>
      </ul>
    </div>
    <div class="items" v-show="carealist" @click="liftup">
      <ul>
        <span>
        <li>
          <input class="input-none" id="careas" type="radio" name="carea" checked="true">
          <label for="careas"  @click="selectcarea('全部区域')">全部区域</label>
        </li>
        </span>
        <span v-for="(item,index) in this.selectitems.area">
          <li class="border-none"  v-if="(index % 2)==0">
            <input class="input-none" :id="'carea' + index" type="radio" name="carea">
            <label :for="'carea' + index"  @click="selectcarea(item.name)">{{ item.name }}</label>
          </li>
          <li v-else >
            <input class="input-none" :id="'carea' + index" type="radio" name="carea">
            <label :for="'carea' + index" @click="selectcarea(item.name)">{{ item.name }}</label>  
          </li>
        </span>
      </ul>
    </div>

    <!-- 列表显示 -->
    <div v-show="coachs" v-for="(item,index) in this.coachitems"> 
       <div class="appoint-content" @click="toCoachDetail(item.id)">
        <img :src="'http://cj.lightway.cc/media/' + item.head_img"/>
        <div class="coach-info">
          <p>{{ item.name }}</p>
          <p class="star">
            <stars :grade="item.score"></stars>
            {{ item.score + '分' }}
          </p>
          <p class="ads">{{ item.area }} <span>{{ item.ads }}</span></p>
          <p class="sub">
            <span v-for="subs in item.subjects">
            <span>{{ subs }} </span>
            </span>
          </p>
        </div>
        <div class="price-info">
          <p>￥<span>{{ item.price }}</span>/小时</p>
          <p class="types">
            <span v-for="types in item.car">
            <span>{{ types }} </span>
            </span>
          </p>
          <p class="ordernum">已约<span>{{ item.order }}</span>单</p>
        </div>
      </div>
    </div>

    <div v-show="courts" v-for="(item,index) in this.courtitems">
      <div class="appoint-content" @click="chooseCoachsOfCourt(item.name)">
        <img :src="'http://cj.lightway.cc/media/' + item.banner"/>
        <div class="coach-info">
          <p>{{ item.name }}</p>
          <p class="star">
            <stars :grade="item.grade"></stars>
            {{ item.grade + '分' }}
          </p>
          <p class="ads">{{ item.location }}</p>
          <p class="sub">已进驻<span>{{ item.coach_num }}</span>位教练</p>
        </div>
        <div class="price-info" v-show="location">
          <p>{{ item.distance + 'km' }}</p>
        </div>
      </div>
    </div>

    <div v-show="coachOfCourt" v-for="(item,index) in this.coachcourts"> 
      <div class="appoint-content" @click="toCoachDetail(item.id)">
        <img :src="'http://cj.lightway.cc/media/' + item.head_img"/>
        <div class="coach-info">
          <p>{{ item.name }}</p>
          <p class="star">
            <stars :grade="item.score"></stars>
            {{ item.score + '分' }}
          </p>
          <p class="ads">{{ item.area }} <span>{{ item.ads }}</span></p>
          <p class="sub">
            <span v-for="subs in item.subjects">
            <span>{{ subs }} </span>
            </span>
          </p>
        </div>
        <div class="price-info">
          <p>￥<span>{{ item.price }}</span>/小时</p>
          <p class="types">
            <span v-for="types in item.car">
            <span>{{ types }} </span>
            </span>
          </p>
          <p class="ordernum">已约<span>{{ item.order }}</span>单</p>
        </div>
      </div>
    </div>

    <notification notification="定位失败，当前没有权限获取定位。" title="提示" isWithdraw="" v-show="tooltip" v-on:gettooltip="showtooltip"></notification>

    <div class="cover" v-show="cover" @click="liftup"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapActions } from 'vuex';
import stars from 'components/stars/stars';
import notification from 'components/notification/notification';
  export default {
    props: {
    },
    data() {
      return {
        tooltip: '',
        location: '',
        area: '全部区域',
        subject: '全部科目',
        cartype: '全部车型',
        type: '全部训练场',
        court: '',
        carea: '全部区域',
        coachs: 'true',
        courts: '',
        coachOfCourt: '',
        class1: 'selected',
        class2: '',
        classA: '',
        classB: '',
        classC: '',
        classD: '',
        classE: '',
        classF: '',
        drop: 'true',
        cover: '',
        arealist: '',
        sublist: '',
        typelist: '',
        carlist: '',
        courtlist: '',
        carealist: '',
        selectitems: [],
        coachitems: [],
        coachcourts: [],
        coachdatas: [],
        courtitems: [],
        courtdatas: []
      };
    },
    created() {
      let tab = this.$store.getters.tabs;
      let x = window.localStorage.x_coordinat;
      let y = window.localStorage.y_coordinat;
      if (tab === 1) {
        this.chooseCourt();
      }
      if (window.localStorage.cphone) {
        this.$http.get('api/coach/coachlist/?school_id=1&mobile=' + window.localStorage.cphone).then((response) => {
          this.selectitems = response.body;
          this.coachdatas = this.coachitems = response.body.data;
          if (this.$store.getters.allcoaches) {
            let allcoaches = this.$store.getters.allcoaches;
            this.selectarea(allcoaches['area']);
            this.selectsub(allcoaches['subject']);
            this.selectcar(allcoaches['cartype']);
          }
        });
      }
      if (window.localStorage.x_coordinat && window.localStorage.y_coordinat) {
        this.$http.get('api/training/traininglist/?x_coordinate=' + x + '&y_coordinate=' + y).then((response) => {
          this.courtitems = this.courtdatas = response.body.data;
          this.location = 'true';
        });
      } else {
        this.$http.get('api/training/traininglist/').then((response) => {
          this.courtitems = this.courtdatas = response.body.data;
          this.location = '';
        });
      }
    },
    methods: {
      ...mapActions([
        'upcoachesment',
        'uptrainsment',
        'uptab'
      ]),
      showtooltip(msg) {
        this.tooltip = msg.tooltip;
      },
      liftup() {
        this.cover = '';
        this.arealist = this.sublist = this.carlist = '';
        this.typelist = this.courtlist = this.carealist = '';
        this.classA = this.classB = this.classC = '';
        this.classD = this.classE = this.classF = '';
      },
      chooseCoach() {
        this.coachs = 'true';
        this.courts = this.coachOfCourt = '';
        this.class1 = 'selected';
        this.class2 = '';
        this.area = '全部区域';
        this.subject = '全部科目';
        this.cartype = '全部车型';
        this.coachFilter(this.area, this.subject, this.cartype);
        this.liftup();
        this.uptab(0);
      },
      chooseCourt() {
        this.coachs = this.coachOfCourt = this.coachpart = '';
        this.courts = 'true';
        this.class2 = 'selected';
        this.class1 = '';
        this.liftup();
        this.uptab(1);
      },
      droparea() {
        if (this.cover === '') {
          this.cover = 'true';
          this.arealist = 'true';
          this.sublist = this.carlist = this.typelist = this.courtlist = this.carealist = '';
          this.classA = 'selects';
          this.classB = this.classC = this.classD = this.classE = this.classF = '';
        } else {
          this.liftup();
        }
      },
      dropsub() {
        if (this.cover === '') {
          this.cover = 'true';
          this.sublist = 'true';
          this.arealist = this.carlist = this.typelist = this.courtlist = this.carealist = '';
          this.classB = 'selects';
          this.classA = this.classC = this.classD = this.classE = this.classF = '';
        } else {
          this.liftup();
        }
      },
      dropcar() {
        if (this.cover === '') {
          this.cover = 'true';
          this.carlist = 'true';
          this.arealist = this.sublist = this.typelist = this.courtlist = this.carealist = '';
          this.classC = 'selects';
          this.classA = this.classB = this.classD = this.classE = this.classF = '';
        } else {
          this.liftup();
        }
      },
      droptype() {
        if (this.cover === '') {
          this.cover = 'true';
          this.arealist = this.sublist = this.carlist = this.courtlist = this.carealist = '';
          this.typelist = 'true';
          this.classA = this.classB = this.classC = this.classE = this.classF = '';
          this.classD = 'selects';
        } else {
          this.liftup();
        }
      },
      dropcourt() {
        if (this.cover === '') {
          this.cover = 'true';
          this.arealist = this.sublist = this.carlist = this.typelist = this.carealist = '';
          this.courtlist = 'true';
          this.classA = this.classB = this.classC = this.classD = this.classF = '';
          this.classE = 'selects';
        } else {
          this.liftup();
        }
      },
      dropcarea() {
        if (this.cover === '') {
          this.cover = 'true';
          this.arealist = this.sublist = this.carlist = this.typelist = this.courtlist = '';
          this.carealist = 'true';
          this.classA = this.classB = this.classC = this.classD = this.classE = '';
          this.classF = 'selects';
        } else {
          this.liftup();
        }
      },
      toCoachDetail: function(id) {
        this.$router.push({ path: '/coaches/' + id });
      },
      selectarea: function(value) {
        this.area = value;
        this.coachFilter(value, this.subject, this.cartype);
      },
      selectsub: function(value) {
        this.subject = value;
        if (this.coachOfCourt !== 'true') {
          this.coachFilter(this.area, value, this.cartype);
        } else {
          this.coachOfCourtFilter(this.court, value, this.cartype);
        }
      },
      selectcar: function(value) {
        this.cartype = value;
        if (this.coachOfCourt !== 'true') {
          this.coachFilter(this.area, this.subject, value);
        } else {
          this.coachOfCourtFilter(this.court, this.subject, value);
        }
      },
      selecttype: function(value) {
        if (value === '离我最近') {
          if (!window.localStorage.x_coordinat || !window.localStorage.y_coordinat) {
            this.tooltip = 'true';
          } else {
            this.type = value;
            this.courtFilter(this.area, value);
          }
        } else {
          this.type = value;
          this.courtFilter(this.area, value);
        }
      },
      selectcarea: function(value) {
        this.carea = value;
        this.courtFilter(value, this.type);
      },
      selectcourt: function(value) {
        this.court = value;
        this.coachOfCourtFilter(value, this.subject, this.cartype);
      },
      chooseCoachsOfCourt: function(area) {
        this.court = area;
        this.coachs = '';
        this.courts = '';
        this.coachOfCourt = 'true';
        this.coachOfCourtFilter(area, this.subject, this.cartype);
      },
      coachOfCourtFilter: function(area, subject, cartype) {
        if (subject === '全部科目') {
          subject = '';
        }
        if (cartype === '全部车型') {
          cartype = '';
        }
        this.coachcourts = [];
        for (let i in this.coachdatas) {
          if ((this.strcontain(this.coachdatas[i].trainsite, area)) && (this.strcontain(this.coachdatas[i].subjects, subject)) && (this.strcontain(this.coachdatas[i].car, cartype))) {
              this.coachcourts.push(this.coachdatas[i]);
          }
        }
        this.coachs = '';
        this.coachOfCourt = 'true';
      },
      coachFilter: function(area, subject, cartype) {
        this.upcoachesment({area: this.area, subject: this.subject, cartype: this.cartype});
        if (area === '全部区域') {
          area = '';
        }
        if (subject === '全部科目') {
          subject = '';
        }
        if (cartype === '全部车型') {
          cartype = '';
        }
        this.coachitems = [];
        for (let i in this.coachdatas) {
          if ((this.strcontain(this.coachdatas[i].area, area)) && (this.strcontain(this.coachdatas[i].subjects, subject)) && (this.strcontain(this.coachdatas[i].car, cartype))) {
              this.coachitems.push(this.coachdatas[i]);
          }
        }
        this.coachs = 'true';
      },
      courtFilter: function(area, type) {
        this.uptrainsment({area: this.carea, type: this.type});
        var data = '';
        if (area === '全部区域') {
          area = '';
        }
        data = this.courtdatas;
        this.courtitems = [];
        for (let i in data) {
          if (this.strcontain(data[i].area, area)) {
            this.courtitems.push(data[i]);
          }
        }
        if (type === '评价最高') {
          this.courtitems.sort(function (x, y) {
            return parseFloat(x.grade) < parseFloat(y.grade) ? 1 : -1;
          });
        }
        if (type === '教练最多') {
          this.courtitems.sort(function (x, y) {
            return x.coach_num < y.coach_num ? 1 : -1;
          });
        }
      },
      strcontain: function(str, substr) {
      if (str.indexOf(substr) >= 0 || !substr) {
          return true;
        } else {
          return false;
        }
      }
    },
    components: {
      stars,
      notification
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
    .clear
      height 80px
      width 100%
      background-color rgb(255,255,255)
    .items
      ul
        list-style none
        color rgb(207,206,206)
        font-size 15px
        z-index 1500
        position fixed
        top 80px
        width 100%
        background-color rgb(255,255,255)
        .border-none
          border none
        span
          li
            list-style none
            width 50%
            box-sizing border-box
            border-1px($border)
            border-right 1px solid $border
            height 40px
            line-height 40px
            text-align center
            display inline
            float left
            background-color rgb(255,255,255)
            label
              display inline-block
              width 100%
              -webkit-tap-highlight-color rgba(0,0,0,0)
            .input-none
              display none
            .input-none:checked+label
              color $se-fn
    .cover
      height 100%
      width 100%
      background-color rgba(32,32,32,0.8)
      position fixed
      top 0px
      z-index 1000
    .down-icon
      display inline-block
      rectangle-icon(rgb(255,255,255),8px,5px)
      icon-image('inverted')
      margin-left 6px

    .appoint-headline
      height 40px
      width 100%
      background-color rgb(255,255,255)
      border-1px($border)
      line-height 40px
      z-index 1500
      position fixed
      top 0px
      div
        font-size 16px
        width 85px
        display inline
        text-align center
      .coach        
        float left
        margin-left 72px
      .court
        float right
        margin-right 72px
      .selected
        border-bottom(4px,$theme)
        color $theme

    .items-select
      height 40px
      width 100%
      background-color rgb(255,255,255)
      border-1px($border)
      line-height 40px
      z-index 1500
      position fixed
      top 40px
      .divv
        display flex
        justify-content space-between
        margin-left 0px
        margin-right 0px
      .div1
        font-size 15px
        color $se-fn
        text-align center
        width 33.33%
        display inline
        float left
        border-right 1px solid $border  
      .div2
        font-size 15px
        color $se-fn
        text-align center
        width 50%
        display inline
        float left
        border-right 1px solid $border
      .border-none
        border none
      .selects
        background-color $border
        color rgb(255,255,255)
        .down-icon
          display inline-block
          rectangle-icon($border,8px,5px)

    .appoint-content
      height 95px
      width 100%
      background-color rgb(255,255,255)
      border-1px($border)
      color $se-fn
      img
        margin-top 16.5px
        margin-left 17px
        width 57px
        height 59px
        border 1px solid $se-fn
        border-radius 5px
        float left
      .coach-info
        margin-left 15px
        display inline
        float left
        margin-top 13px
        font-size 15px
        .star
          margin-top 6.5px
          font-size 13px
          margin-left -2px
        .ads
          margin-top 4.5px
          font-size 11px
          height 15px
        .sub
          font-size 11px
          height 15px
      .price-info
        margin-right 17px
        display inline
        float right
        text-align right
        margin-top 15px
        font-size 13px
        .types
          font-size 13px
          padding-right 0px
          margin-top 7px
        .ordernum
          font-size 11px
          margin-top 17px
          color rgb(207,206,206)
</style>